/*
 * @Author: liu.wang 1947389483@qq.com
 * @Date: 2025-01-21 13:07:13
 * @LastEditors: liu.wang 1947389483@qq.com
 * @LastEditTime: 2025-01-21 14:39:32
 * @FilePath: \vue-design\一、框架设计概览\01、权衡的艺术\03、虚拟DOM.js
 * @Description: 
 */



/**
 * 
 * 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗
 * 
 * 虚拟DOM：为了最小化找出差异
 * 
 * 
 * 
 * 
 * 一、创建页面
 * 
 * innerHTML创建页面的性能 = HTML字符串拼接的计算量 + innerHTML的DOM计算量
 * 
 * 虚拟DOM创建页面：创建JS对象的计算量 + 创建真实DOM的计算量
 * 1、创建JS对象
 * 2、递归遍历虚拟DOM树并创建真实DOM
 * 
 * 
 * 
 * 
 * 二、更新页面
 * innerHTML更新页面： 重新构建HTML字符串，再重新设置DOM元素的innerHTML属性（销毁旧的DOM元素，全量创建新的DOM元素）
 * 
 * 虚拟DOM：重新创建新的JS对象，对比旧的DOM，找到变化的元素并更新
 * 
 * 更新页面时，虚拟DOM在JS层面运算要比创建页面时多出一个diff的性能消耗
 * 虚拟DOM只更新必要的元素，innerHTML需要全量更新
 *  
 * 
*/



/***
 * 对比
 * innerHTML：有一定心智负担，页面越大性能越差
 * 
 * 原生DOM：心智负担最大（手动创建、修改、删除大量DOM元素），性能最高，可维护性极差
 * 
 * 虚拟DOM：心智负担小、可维护性强、性能尚可
 * 
 */